<template>
  <div class="classification">
    <div class="left">
      <ul>
        <li v-for="(value,index) in category" :class="{active:current[index]}" @click="switchGood(index)">
          {{value.name}}
        </li>
      </ul>
    </div>
    <div class="right" v-if="sonCategory.length">
      <div class="wrap" v-for="(value,index) in sonCategory">
        <p>{{value.name}}</p>
        <ul class="clearfix wrapHeight">
          <li v-for="(val,indexs) in value.goodList" class="liHeight">
            <router-link :to="{name:'goodlist' ,query : {Id:val.id}}">
              <img :src="val.image" />
              <h5>{{val.name}}</h5>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Data from '@/server/server.js'
export default {
  data () {
    return {
      goodnameNum: 0,
      current: [],
      category: [],
      sonCategory:[]
    }
  },
  methods: {
    switchGood (index) { // 切换时重新请求端口
      const id=this.category[index].id;
      this.current = []
      this.current[index] = true
      this.goodnameNum = index
      this.setHeight()
      this.changeData(id);
    },
    setHeight () {
      this.$nextTick(function () {
        var liHeight = 6
        var ulDom = document.getElementsByClassName('wrapHeight')
        for (var i = 0; i < ulDom.length; i++) {
          var num =
            document.getElementsByClassName('wrapHeight')[i].children.length / 3
          var row = Math.ceil(num)
          ulDom[i].style.height = liHeight * row + 'rem'
        }
      })
    },
    changeData (id=1) {
      Data.classification.then(data => {
        this.category = data
      })
      Data.sonClassification(id).then(data => {
        this.sonCategory = data
        this.setHeight()
      })
    }
  },
  mounted () {
    this.changeData(1)
  },
  created () {
    this.current[0] = true
  }
}
</script>

<style scoped="scoped">
.clearfix {
  display: block;
  clear: both;
  content: '';
}

.classification {
  width: 100%;
  clear: both;
  background: #f0f0f0;
}

.classification ul {
  list-style: none;
}

.left {
  width: 23%;
  text-align: center;
}

.right {
  width: 77%;
}
.left,
.right {
  height: 38rem;
  float: left;
  overflow-y: scroll;
  padding-top: 0.4rem;
}
.left ul li {
  font-size: 0.8rem;
  opacity: 0.8;
  box-sizing: border-box;
  line-height: 3rem;
  width: 100%;
  background: white;
  height: 3rem;
  margin-bottom: 2px;
}

.left .active {
  background: #f0f0f0;
  color: #09bb07;
  border-left: 3px solid #09bb07;
}

.right .wrap {
  width: 92%;
  margin: 0 auto;
}

.right .wrap p {
  font-weight: bold;
  padding: 0.8rem 0 0.5rem 0;
  font-size: 0.87rem;
}

.right ul {
  width: 100%;
  height: 100%;
  /*overflow-y: scroll;*/
  background: white;
  padding: 1rem 0;
}

.right ul li {
  width: 33%;
  /*border: 1px solid red;*/
  box-sizing: border-box;
  float: left;
  height: 6rem;
  text-align: center;
}

.right ul li img {
  margin-top: 10%;
  width: 60%;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.right ul li h5 {
  font-weight: normal;
  color: gray;
}
::-webkit-scrollbar {
  display: none;
}
</style>